<template>
  <div class="bctype-login">
    <el-form :model="formData" label-width="40px" ref="formRef" :rules="rules">
      <el-form-item label="平台" prop="bc_type">
        <el-select
          v-model="formData.bc_type"
          style="height: 28px"
          @change="getiplist()"
          placeholder="选择平台"
        >
          <el-option
            v-for="(item, index) in allbctype"
            :key="index"
            :label="item.name"
            :value="item.bc_type"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="用户" prop="user_name">
        <el-input v-model="formData.user_name" style="height: 28px" />
      </el-form-item>
      <el-form-item label="密码" prop="pass_word">
        <el-input v-model="formData.pass_word" style="height: 28px" />
      </el-form-item>
      <el-form-item label="IP" prop="proxy_ip_id">
        <!-- <app-ip-input :iparr="iparr" /> -->
        <!-- <el-input v-model="formData.ip" style="height: 28px" /> -->
        <el-select v-model="formData.proxy_ip_id" style="height: 28px" placeholder="选择IP">
          <el-option v-for="(item, index) in iplist" :key="index" :label="item.ip" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button v-if="!loginin" class="login-in" @click="clickLogin()">登录</el-button>
        <el-button v-else class="login-in-disabled" disabled>登录中</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { http } from '@/utils/http'
import { ElMessage } from 'element-plus'
import { inject, onMounted } from 'vue'

const formRef = ref(null)
const formData = ref({
  user_name: '',
  pass_word: '',
  bc_type: '',
  proxy_ip_id: '',
})
const iplist = ref([])
const iparr = ref(['', '', '', '', ''])
const allbctype = inject('allbctype')
const loginin = ref(false)
const emits = defineEmits()

const rules = reactive({
  bc_type: [{ required: true, message: '请选择平台', trigger: 'blur' }],
  user_name: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  pass_word: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  proxy_ip_id: [{ required: true, message: '请选择ip', trigger: 'blur' }],
})

const clickLogin = () => {
  formRef.value.validate().then(async () => {
    loginin.value = true
    http.post('/read_list/agent_login', formData.value).then(res => {
      loginin.value = false
      if (res.code == 200) {
        ElMessage({
          message: res.msg,
          type: 'success',
        })
        emits('refreshUserlist')
      } else {
        ElMessage.error(res.msg)
      }
    })
  })
}

const getiplist = () => {
  http
    .get(`/read_list/proxyip_list?page=1&page_size=999&status=1`)
    .then(res => {
      iplist.value = res.data.list
    })
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.bctype-login {
  padding: 12px;
}
.login-in {
  width: 72px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 1px;
  background-color: var(--pcmain-color);
  border-color: var(--pcmain-color);
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}
.login-in-disabled,
.login-in-disabled:hover {
  width: 72px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 1px;
  background-color: var(--pcmain-color);
  border-color: var(--pcmain-color);
  font-size: 12px;
  color: #fff;
  opacity: 0.5;
}
</style>

<style>
.bctype-login .el-input__wrapper,
.bctype-login .el-select__wrapper {
  border-radius: 0;
}
.bctype-login .el-select__wrapper {
  min-height: 28px;
}
.bctype-login .el-form-item {
  margin-bottom: 8px;
}
.bctype-login .el-form-item__label,
.bctype-login .el-input__inner,
.bctype-login .el-select__selected-item,
.bctype-login .el-select__placeholde {
  font-size: 12px;
  color: #000;
}

.bctype-login .el-form-item__error{
  top: 30px;
  padding-top: 0;
}
.bctype-login .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before, 
.bctype-login .el-form-item.is-required:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label:before{
  display: none !important;
}
</style>
